<style>
  .sale-drawer-footer{
    width: 100%;
    position: relative;
    bottom: -135px;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
  .show-info{
    font-size: 16px;
    margin-left: 100px;
    margin-bottom: 50px;
    margin-top: 50px;
    text-align: left
  }
  .show-info span:first-child {
    display: inline-block;
    width: 150px;
    margin-right: 15px;
  }
  .sale-table {
    margin-top: 10px;
  }
  .sale-paging {
    float:right;
    margin-top:20px;
  }
</style>
<template>
  <div>
    <Drawer
      v-model="modalState"
      :mask-closable="false"
      :closable="false"
      :title="drawertitle"
      width="87%">
      <Tabs type="card" v-model="tabName" @on-click="handleClick">
        <TabPane label="云销售基本信息" name="infoName">
          <div class="show-info">
            <Row style="margin-bottom: 30px">
              <Col span="10">
                <span>云销售信息：</span>
              </Col>
            </Row>
            <Row>
              <Col span="10">
                <span>加入日期：</span>
                <span>{{row.ctime}}</span>
              </Col>
            </Row>
            <Row>
              <Col span="10">
                <span>云销售姓名：</span>
                <span>{{row.coludname ? row.coludname : '-'}}</span>
              </Col>
            </Row>
            <Row>
              <Col span="10">
                <span>性别：</span>
                <span>{{row.sex === 1 ? '男' : '女'}}</span>
              </Col>
            </Row>
            <Row>
              <Col span="10">
                <span>电话：</span>
                <span>{{row.tel}}</span>
              </Col>
            </Row>
            <Row>
              <Col span="10">
                <span>生日日期：</span>
                <span>{{row.born ? this.$moment(row.born).format('YYYY-MM-DD') : '-'}}</span>
              </Col>
            </Row>
            <Row style="margin-bottom: 30px; margin-top: 50px">
              <Col span="20">
                <span>云销售业绩数据：</span>
              </Col>
            </Row>
            <Row>
              <Col span="5">
                <div style="border-left: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; text-align: center">总销售业绩：{{row.hisprice ? row.hisprice : 0}}</div>
              </Col>
              <Col span="5">
                <div style="border: 1px solid #000; text-align: center">当月售业绩：{{row.mprice ? row.mprice : 0}}</div>
              </Col>
              <Col span="5">
                <div style="border-right: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; text-align: center">历史佣金：{{row.hiscomm ? row.hiscomm : 0}}</div>
              </Col>
            </Row>
            <Row style="margin-bottom: 30px; margin-top: 50px">
              <Col span="20">
                <span>云销售客户数量：</span>
              </Col>
            </Row>
            <Row>
              <Col span="5">
                <div style="border-left: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; text-align: center">客户数量：{{row.acn}}</div>
              </Col>
              <Col span="5">
                <div style="border: 1px solid #000; text-align: center">到店数量：{{row.cnum}}</div>
              </Col>
              <Col span="5">
                <div style="border-right: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; text-align: center">签约数量：{{row.onum}}</div>
              </Col>
            </Row>
          </div>
        </TabPane>
        <TabPane label="云销售客户列表" name="listName">
          <cloud-sale-form
            class="cloud-sale-form"
            @on-success-valid="handleSubmit">
          </cloud-sale-form>
          <cloud-sale-table class="sale-table" :tableData="saleHistoryData" :page="page" :pageSize="pageSize" :title="title" :list="saleDrawerList"></cloud-sale-table>
          <table-page
            class="sale-paging"
            :dataCount="dataCount"
            @change-page="changePage"
            @change-page-size="changePageSize"
            :pageSize="pageSize"
            :page="page">
          </table-page>
        </TabPane>
      </Tabs>
      <div class="sale-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">{{cancelTitle}}</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import CloudSaleTable from '_c/cloud-sale-table'
import TablePage from '_c/table-page'
import CloudSaleForm from '_c/cloud-sale-form'
export default {
  name: 'SaleDrawer',
  components: {
    CloudSaleTable,
    CloudSaleForm,
    TablePage
  },
  props: {
    row: null
  },
  data () {
    return {
      drawertitle: '',
      tabName: 'infoName',
      loading: true,
      cancelTitle: '返回',
      title: '云销售客户列表',
      page: 1
    }
  },
  updated () {
    this.drawertitle = `销售列表详情页`
  },
  computed: {
    ...mapState({
      // row: state => state.taskList.row,
      modalState: state => state.modal.saleDrawerState,
      saleDrawerList: state => state.saleDrawerTable.saleDrawerList,
      dataCount: state => state.saleDrawerTable.saleDrawerDataCount,
      saleHistoryData: state => state.saleDrawerTable.saleDrawerHistoryData,
      pageSize: state => state.saleDrawerTable.saleDrawerPageSize
    })
  },
  methods: {
    ...mapActions([
      'updateSaleDrawerState',
      'getSaleDrawerList',
      'changeSaleDrawerPage',
      'changeSaleDrawerPageSize'
    ]),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    // handleSubmit () {
    //   this.$emit('customer-valid', {
    //     reservetime: this.form.reservetime ? this.$moment(this.form.reservetime, this.$moment.ISO_8601).format('YYYY-MM-DD') : '',
    //     newreservetime: this.form.newreservetime ? this.$moment(this.form.newreservetime, this.$moment.ISO_8601).format('YYYY-MM-DD') : '',
    //     commodity: this.form.commodity,
    //     yxcommodity: this.form.yxcommodity,
    //     commission: this.form.commission,
    //     signmoney: this.form.signmoney,
    //     des: this.form.des
    //   })
    // },
    cancel () {
      this.updateSaleDrawerState(false)
      this.tabName = 'infoName'
      this.changePageSize(10)
      // this.$refs['saleDrawer'].resetFields()
    },
    handleSubmit (playload) {
      // //console.log(playload)
      this.getSaleDrawerList({
        ...playload,
        uid: this.row.id ? this.row.id : -1
      })
    },
    changePage (index) {
      this.page = index
      this.changeSaleDrawerPage(index)
    },
    changePageSize (value) {
      this.changeSaleDrawerPageSize(value)
      this.changePage(this.page)
    },
    handleClick () {
      this.changePageSize(10)
      this.page = 1
      this.changePage(1)
    }
  }
}
</script>
